<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3_新增2D位移</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            float: left;
            border: 1px solid red;
            margin-left: 20px;
        }
        .div1{
            /*transform: translate(100px,100px);*/
            /*transform: translateX(50%);*/
        }
        /*.div1{*/
        /*    position: absolute;*/
        /*    top: 50%;*/
        /*    left: 50%;*/
        /*    transform: translate(-50%, -50%);*/
        /*}*/

        .div1{
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

    </style>
</head>
<body>
<!--
    2D位移：
        2D位移可以改变元素的位置，具体使用方式如下：
            1.先给元素添加转移属性 transform
            2.编写transform的具体值，可选值如下：
               transformX:设置水平方向位移，需要指定长度值，若指定的是百分比，则参考自身宽度的百分比。
               transformY:设置垂直方向位移，需要指定长度值，若指定的是百分比，则参考自身高度的百分比。
               transform: 设置一个值代表水平方向，两个值代表：水平和垂直方向
       注意点：
        1. 位移和相对定位很相似，都不脱离文档流，也不会影响到其他元素。
        2. 与相对定位的区别：相对定位的百分比值，参考的是其父元素;定位的百分比参考其自身。
        3. 浏览器针对定位有优化，与定位相比，浏览器处理位移的效率更高。
        4.transform可以链式编写，例如：
            transform: translateX(50%) translateY(50%);
        5.位移对行内元素无效。
        6.位移配合定位，可以实现元素水平垂直居中。



-->
    <div class="div1">1</div>

</body>
</html>